
import React, { useState, useEffect } from "react"
import { Form, Input, Button, message,Table } from 'antd';
import { useDispatch, useSelector, useHistory, useLocation } from 'umi'
import "./classify.less"
const IndexPage: React.FC = () => {
  const [data2, setdata2] = useState()
  const dispatch = useDispatch()
  const [form]=Form.useForm()
  //设置input的宽度
  const inputLayout = {
    wrapperCol: {span: 24}
}
  const [flag,setFlag]=useState<boolean>(false)
  const { questionType } = useSelector(module => (module as { addQuestions: { questionType: [] } }).addQuestions)
  //派发dispatch
  useEffect(() => {
    dispatch({
      type: "addQuestions/getQuestionType",
    })
  }, [])

  //点击添加类型出现蒙层
  function handleAdd() {
      setFlag(true)
  };
  //点击取消蒙层关闭
  function cancel(){
    setFlag(false)
  }
  //引入表格
  const columns = [
    {
      title: '类型ID',
      dataIndex: 'name',
    },
    {
      title: '类型名称',
      dataIndex: 'chinese',
    },
    {
      title: '操作',
      dataIndex: 'math',
    },
  ];
  //操作事件
  useEffect(() => {
    const data1: any = []
    questionType && questionType.map((item: { questions_type_id: string, questions_type_text: string, questions_type_sort: string }, index) => {
      return data1.push(
        {
          key: index,
          name: item.questions_type_id,
          chinese: item.questions_type_text,
        },
      )
    })
    setdata2(data1)
  }, [questionType])
  
  //事件
  function onChange(pagination: any, filters: any, sorter: any, extra: any) {
    console.log('params', pagination, filters, sorter, extra);
  }

  function onFinish(value:{text:string,sort:number}){
    let values=value
    let num=questionType.length+1
    console.log("ssssssssss",num)
    values={
        ...values,
        sort:num
    }
    
  let result=dispatch({
    type:'addQuestions/insertQuestionsType',
    payload:values
   });
   (result as unknown as Promise<{code: number, msg: string}>).then(res=>{
       console.log(res)
        if(res.code===1){
            message.success(res.msg);
            setFlag(false)
        }else{
          message.error(res.msg);
          setFlag(true)
        }
        form.resetFields();
   })
}
  return (
    <div className='box'>
      <h1>试题分类</h1>
      <Button onClick={handleAdd} type="primary" style={{ marginBottom: 16 }}>
        +添加类型
            </Button>
      <Table columns={columns} dataSource={data2} onChange={onChange} />
      {/* 点击添加出现蒙层 */}
      <div>
        {
          flag&&<div className='Mantle'>
                <div className='White'>
                <Form  onFinish={onFinish} form={form} initialValues={{
                            text:''
                        }}>
                            <h3>创建新类型</h3>
                            <Form.Item
                                name='text'
                                rules={[{ required: true, message: '请输入类型名称!' }]}
                                {...inputLayout}
                            >
                                <Input placeholder='请输入类型名称' className="input"/>
                            </Form.Item>
                            <div className='btns'>
                            <Button className="sub" type="primary" htmlType="submit">确认</Button>
                            <input type="button" value='取消' className="none" onClick={cancel}/>
                            </div>
                        </Form>
                </div>
          </div>
        }
      </div>
    </div>
   
  );
}
export default IndexPage